<template>
	<div>
		<el-button class="yuyue_button" type="primary" size="medium" @click="tianjia">
			场地预约
		</el-button>
		<el-button class="yuyue_button" type="primary" size="medium" @click="guanli">
			房间管理
		</el-button>
		<el-calendar v-model="value">
			<template slot="dateCell" slot-scope="{ data }">
				<div>
					<div class="calendar-day" style="margin-bottom: -10px; float: left">
						{{ data.day.split('-').slice(2).join('-') }}
					</div>
					<br />
					<div v-for="(item, index) in tableData" :key="index">
						<div v-if="item.date.indexOf(data.day) != -1">
							<el-tooltip class="item" effect="dark" :content="item.name" placement="right">
								<div class="is-selected">
									<div style="height: 15px; margin-bottom: -5px">
										<el-scrollbar style="height: 100%;">
											<p>{{ item.type }}:{{ item.name }} (预约时段：{{ item.timeScope }})</p>
										</el-scrollbar>
										<!-- <br><p style="margin-top: -15px;">状态：</p> -->
										<!-- <el-button type="text" style="float: right;margin-right: 0px" @click="appointment">预约</el-button> -->
									</div>
								</div>
							</el-tooltip>
						</div>
						<div v-else></div>
					</div>
				</div>
			</template>
		</el-calendar>
	</div>
</template>

<script>
import { appoinmentRoomsListCustomerRoomApp } from '@/APIs/index/index'
export default {
	name: 'Appointment',
	data() {
		return {
			value: new Date(),
			tableData: []
		}
	},
	created() {
		console.log()
		this.Appointment()
	},
	mounted() {},
	methods: {
		async Appointment() {
			const data = await appoinmentRoomsListCustomerRoomApp()
			// console.log(data.data.list)
			for (let i = 0; i < data.data.list.length; i++) {
				this.tableData.push({
					agree: data.data.list[i].agree, // 审核
					// customerRoomAppCreateTime: data.data.list[i].customerRoomAppCreateTime, // 发起时间
					// customerRoomAppEquipment: data.data.list[i].customerRoomAppEquipment, // 事物
					name: data.data.list[i].customerRoomAppName, // 场馆名字
					// customerRoomAppStatus: data.data.list[i].customerRoomAppStatus, // 可否预约
					// customerRoomAppApprover: data.data.list[i].customerRoomAppApprover, // 审核人
					date: data.data.list[i].customerRoomAppDate, // 预约日期
					// customerRoomAppRemark: data.data.list[i].customerRoomAppRemark, // 备注
					timeScope: data.data.list[i].customerRoomAppTimeScope, // 预约时间段
					type: data.data.list[i].customerRoomAppType // 场馆类型
					// customerRoomAppUsername: data.data.list[i].customerRoomAppUsername // 预约人
				})
			}
			console.log(this.tableData)
		},
		// 点击添加
		tianjia() {
			console.log('添加预约')
			this.$router.push('/Appointment1')
		},
		// 点击管理
		guanli() {
			console.log('场馆管理')
		}
	}
}
</script>

<style>
.yuyue_button {
	float: right;
	margin-top: 10px;
	margin-right: 10px;
}
</style>